<template>
  <view>
    <!-- 整个商品列表盒子容器 -->
    <view class="goods-list">
      <!-- 经测试，block是虚拟元素，不是块元素，没有高度，navigator反而是块元素 -->
      <!-- 循环每个商品 -->
      <navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id" 
                 v-for="(goods, i) in goodsList" :key="i">
        <!-- 通过调用 my-goods 自定义组件的方法循环渲染每个商品 -->
        <my-goods :goods="goods" />
      </navigator>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          // 商品查询关键字
          query: '',
          // 商品分类id
          cid: '',
          // 查询页索引
          pagenum: 1,
          // 每页显示的商品数
          pagesize: 10
        },
        // 商品列表数据
        goodsList: [],
        // 总商品数，用于实现分页
        goodsTotal: 0,
        // 获取商品列表数据 ajax 请求节流阀，防止请求未完成前，重复发起多次请求
        isLoading: false
      };
    },
    onLoad(options) {  // options参数保存了从url传以过来的get参数
      // 获取 url 传过来的商品关键字 query 或商品分类 cid 参数
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      // console.log(this.queryObj)
      
      // 如果商品搜索关键字或分类id不为空，则调用获取商品列表的方法
      if(this.queryObj.query || this.queryObj.cid){
        this.getGoodsList()
      }
    },
    // 上拉触底触发事件函数（在 pages.json 里配置触底像素距离 onReachBottomDistance）
    onReachBottom(){
      // isLoading：获取商品列表数据 ajax 请求节流阀，防止请求未完成前，重复发起多次请求
      if(this.isLoading) return uni.$showMsg('请勿重复发起数据请求！')
      if(this.queryObj.pagenum * this.queryObj.pagesize >= this.goodsTotal)
        return uni.$showMsg('数据已加载完成！', 2000, 'none')
      // 触底加载下一页数据，页码自增加1
      this.queryObj.pagenum++
      // 发起获取下一页商品数据请求
      this.getGoodsList()
    },
    // 下拉刷新事件处理函数
    onPullDownRefresh(){
      // 重置初始化关键数据
      this.goodsList = []
      this.goodsTotal = 0
      this.queryObj.pagenum = 1
      this.isLoading = false
      // 用以上初始数据重新发起数据请求，并传递一个关闭刷新效果的回调函数，否则会一直显示下拉效果
      this.getGoodsList(() => uni.stopPullDownRefresh())
    },
    methods: {
      // 根据商品关键字query或商品分类cid获取商品数据列表的方法
      async getGoodsList(callback) {  // callback回调函数只有在下拉刷新才会传过来，用于处理完后，执行回调关闭下拉刷新效果
        // isLoading：获取商品列表数据 ajax 请求节流阀，防止请求未完成前，重复发起多次请求，
        // 在 onReachBottom 上拉触底事件判断，如果 isLoading 为 true ，不再发起请求
        this.isLoading = true  // 请求开始前，设为true
        const {data: res} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        callback && callback()  // 短路判断，如果回调函数存在，则执行
        if(res.meta.status !== 200) return uni.$showMsg()
        /* 处理上拉触底事件 onReachBottom 事件后，使用 ... 解构原有和新加载的商品列表数据进行拼接，
           不能使用 this.goodsList.push(res.message.goods) 进行拼接，这样最后一个元素又是一个数组，
           所以最后一个元素是二维数组，遍历会有问题*/
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.goodsTotal = res.message.total
        // console.log(this.$data)  // 不能用 this.data，data前要加$符号
        this.isLoading = false  //请求结束后，设为false
      }
    }
  }
</script>

<style lang="scss">

</style>
